<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <tabs :tabs="tabs" :initialIndex="1"></tabs>
  </div>
</template>

<script>
import VHeader from 'components/v-header/v-header'
import Tabs from 'components/tab/tab'
import Goods from 'components/goods/goods'
import Ratings from 'components/ratings/ratings'
import Seller from 'components/seller/seller'
import { getSeller, getGoods, getRating } from 'api'

export default {
  name: 'App',
  data() {
    return {
      seller: {},
      goods: [],
      ratings: []
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller
          }
        },{
          label: '评价',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },{
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  },
  components: {
    VHeader,
    Tabs,
  },
  // 将所有的方法最好放 methods 方法里， 让自己的代码看起来逻辑清晰
  created() {
    this._getSeller();
    this._getGoods();
    this._getRating();
  },
  methods: {
    _getSeller() {
      // 返回的是promise， 直接调用then
      // 因为是引用别的已经定义好的方法，所以不需要引用 this. 的形式
      getSeller().then(seller => {
        this.seller = seller
      })
    },
    _getGoods() {
      getGoods().then(goods => {
        this.ratings = goods
      })
    },
    _getRating() {
      getRating().then(rating => {
        this.ratings = rating
      })
    }
  }
}
</script>

<style lang="stylus">

</style>
